import React,{useEffect,useState} from 'react'
import { Wrapper } from './style'
import  {
  checkmovie,
  getmovies,
  changemovienum,

} from '../store/actionCreator'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom';
import LazyLoad from 'react-lazyload';
import waitImg from '@/assets/wait.gif'
 function CardMovie(props) {
  const { movieslist} = props
  const [state, setState] = useState(false)
 const {
  checkmovieDispatch,
  getmoviesDispatch,
  changemovienumDispatch
 } = props
 const checkmovieAction = (e,id) => {
  e.preventDefault();
  e.stopPropagation();
  checkmovieDispatch(id)
}
 const changeGoodNum = (e, status, id) => {
  let data = {
    status:status,
    id:id
  }

  changemovienumDispatch(data)
}
useEffect(()=> {
  window.scrollTo(0,0);
  if(!movieslist.length) {
    getmoviesDispatch() 
  }
 
},[])
  return (
    <Wrapper state={state}>
      <div className="card">
          <div className='card-title'>
            <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d54a896ca5c54f0fae8b4e4a5ffad17a~tplv-k3u1fbpfcp-watermark.image?" alt="123"/>
            <p>电影/影院</p>
          </div>
          <div  className='card-title'>
            <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7c000f818024d12b34b112a03e58b79~tplv-k3u1fbpfcp-watermark.image?" alt="12"/>
            <p>演出/玩乐</p>
          </div>
          <div className='card-title'>
            <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12256164b1144b1abf8aa752bd28c8c3~tplv-k3u1fbpfcp-watermark.image?" alt="1"/>
            <p>放映厅</p>
          </div>
          <div  className='card-title'>
            <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00886a695c4c4e34aef95833cd695314~tplv-k3u1fbpfcp-watermark.image?" alt="2"/>
            <p>赛事</p>
          </div>
          <div className='card-content'>
          <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff4c0442889347ae8b07addb78e0c181~tplv-k3u1fbpfcp-watermark.image?" alt="" />
          <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/023f049fcba348be9066010d19a44231~tplv-k3u1fbpfcp-watermark.image?" alt="" />
          <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7661459ea1f46a498c5f3076dd3abcc~tplv-k3u1fbpfcp-watermark.image?" alt="" />
          <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/451b854c7b3e478baa0a992d4a9c3946~tplv-k3u1fbpfcp-watermark.image?" alt="" />
          </div>
      </div>
      <div className='card' style={{"height":"12rem"}}>
        <span className='title-movie'>正在热映</span><span>全部31部 &gt;</span>
        {
         movieslist.map((item,index) => {
          return (
            item.id<=4 &&
            <div className='card-movie' key={index}>
              <Link to='/homedetail'>
                <LazyLoad placeholder={
                  <img width="100%" height="100%"
                 src={waitImg}
                 />}>
                  <img src={item.url} alt="占位"/>
                </LazyLoad>
              </Link>
                <p>{item.title}</p>
                <div className='btn'
                 onClick={e =>{checkmovieAction(e,item.id),setState(!state)}}>
                  购票
                </div>    
              </div>
          )
        
        })    
      }
      </div>
      <div className='card' style={{"height":"12rem"}}>
        <span className='title-movie'>即将上映</span><span>全部37部 &gt;</span>
        {
         movieslist.map((item,index) => {
          return (
            item.id>4 &&
            <div className='card-movie'key={index}>
              <Link to='/homedetail'>
                <LazyLoad placeholder={
                  <img width="100%" height="100%"
                 src={waitImg}
                 />}>
                  <img src={item.url} alt="占位"/>
                </LazyLoad>
              </Link>
                <p>{item.title}</p>
                <div className='btn' style={{"backgroundColor":"rgb(60,159,230)"}}
                 onClick={e =>checkmovieAction(e,item.id)}>
                 购票
                </div>
             
            </div>
          )
        })    
      }
      </div>
    </Wrapper>
  )
}
const mapStateToProps = (state) => {

  return {
    movieslist: state.Home.movieslist, 
    // 全选？ 状态？ redux 管理 
    // redux  <-  驱动 -> UI

  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    checkmovieDispatch(id) {
      dispatch(checkmovie(id))
    },
    changemovienumDispatch(data) {
      dispatch(changemovienum(data))
    },
    getmoviesDispatch() {
      dispatch(getmovies())
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(CardMovie))
